<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="id"
                    label="菜单编号"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="label"
                    label="菜单名称"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="level"
                    label="级别">
            </el-table-column>
            <el-table-column
                    prop="path"
                    label="路径">
            </el-table-column>
            <el-table-column
                    prop="component"
                    label="组件名称">
            </el-table-column>
            <el-table-column
                    prop="parentId"
                    label="父id">
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-link type="primary">编辑</el-link> |

                    <!--我们在添加的时候,新加的菜单数据的parentId必须是该行数据的id-->
                    <el-link type="success" @click="toAdd(scope.row)">添加</el-link> |
                    <el-link type="warning">删除</el-link>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>
<script>
    export default {
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            toAdd(row){

            },
            initList(){
                this.axios.get("http://localhost:9001/menu/getTree").then(resp=>{
                    this.tableData=resp.data.data.menuList
                })
            }
        },
        created() {
            this.initList()
        }
    }
</script>

<style scoped>

</style>
